import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:kepu/page/category_page/provider/animal_type_list.dart';
import 'package:kepu/page/category_page/provider/plant_type_list.dart';
import 'package:kepu/page/category_page/provider/region_list.dart';
import 'package:kepu/page/category_result_page/animal_category_result_page.dart';
import 'package:kepu/page/category_result_page/region_category_result_page.dart';
import 'package:kepu/widgets/error_widget.dart';
import 'package:kepu/widgets/loading_widget.dart';

import '../../widgets/textWithIcon.dart';
import '../category_result_page/plant_category_result_page.dart';

class CategoryPage extends ConsumerWidget {
  const CategoryPage({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    var animalType = ref.watch(animalTypeListProvider);
    var plantType = ref.watch(plantTypeListProvider);
    var region = ref.watch(regionListProvider);
    return Scaffold(
      appBar: AppBar(title: Text("分类")),
      body: Padding(
        padding: const EdgeInsets.all(15.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            //动物
            labelText("动物"),
            SizedBox(height: 30),
            animalType.when(
              data:
                  (value) =>
                  Wrap(
                    spacing: 15, //横向距离
                    runSpacing: 15, // 纵向距离
                    children: List.generate(value.data.length, (index) {
                      return GestureDetector(
                        onTap: () {
                          //跳转到动物具体分类
                          Navigator.of(context).push(
                            MaterialPageRoute(
                              builder:
                                  (_) =>
                                  AnimalCategoryResultPage(
                                    id:value.data[index].animaltypeId,
                                    categoryName: value.data[index]
                                        .animaltypeContent,
                                  ),
                            ),
                          );
                        },
                        child: Container(
                          padding: EdgeInsets.symmetric(
                            horizontal: 10,
                            vertical: 5,
                          ),
                          decoration: BoxDecoration(
                            color: Colors.tealAccent.withValues(alpha: 0.3),
                            borderRadius: BorderRadius.circular(15),
                          ),
                          child: Text(value.data[index].animaltypeContent),
                        ),
                      );
                    }),
                  ),
              error: (e, st) => errorWidget(),
              loading: () => loadWidget(context),
            ),
            SizedBox(height: 15),
            Divider(),
            SizedBox(height: 15),
            //植物
            labelText("植物"),
            SizedBox(height: 30),
            plantType.when(
              data:
                  (value) =>
                  Wrap(
                    spacing: 15, //横向距离
                    runSpacing: 15, // 纵向距离
                    children: List.generate(value.data.length, (index) {
                      return GestureDetector(
                        onTap: () {
                          //跳转到植物具体分类
                          Navigator.of(context).push(
                            MaterialPageRoute(
                              builder:
                                  (_) =>
                                  PlantCategoryResultPage(
                                    id:value.data[index].planttypeId,
                                    categoryName: value.data[index].planttypeContent,
                                  ),
                            ),
                          );
                        },
                        child: Container(
                          padding: EdgeInsets.symmetric(
                            horizontal: 10,
                            vertical: 5,
                          ),
                          decoration: BoxDecoration(
                            color: Colors.tealAccent.withValues(alpha: 0.3),
                            borderRadius: BorderRadius.circular(15),
                          ),
                          child: Text(value.data[index].planttypeContent),
                        ),
                      );
                    }),
                  ),
              error: (e, st) => errorWidget(),
              loading: () => loadWidget(context),
            ),
            SizedBox(height: 15),
            Divider(),
            SizedBox(height: 15),
            labelText("地区"),
            SizedBox(height: 30),
            region.when(
              data:
                  (value) =>
                  Wrap(
                    spacing: 15, //横向距离
                    runSpacing: 15, // 纵向距离
                    children: List.generate(value.data.length, (index) {
                      return GestureDetector(
                        onTap: () {
                          // 跳转到地区具体分类
                          Navigator.of(context).push(
                            MaterialPageRoute(
                              builder:
                                  (_) =>
                                  RegionCategoryResultPage(
                                    id:value.data[index].regionId,
                                    categoryName: value.data[index].regionName,
                                  ),
                            ),
                          );
                        },
                        child: Container(
                          padding: EdgeInsets.symmetric(
                            horizontal: 10,
                            vertical: 5,
                          ),
                          decoration: BoxDecoration(
                            color: Colors.tealAccent.withValues(alpha: 0.3),
                            borderRadius: BorderRadius.circular(15),
                          ),
                          child: Text(value.data[index].regionName),
                        ),
                      );
                    }),
                  ),
              error: (e, st) => errorWidget(),
              loading: () => loadWidget(context),
            ),
          ],
        ),
      ),
    );
  }
}
